<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix">
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Box-demo-Default">默认样式</a></li>
                <li><a href="#src-components-Box-demo-Variants">盒子变体</a></li>
                <li><a href="#src-components-Box-demo-Solid">实心盒子</a></li>
                <li><a href="#src-components-Box-demo-Loading">加载状态</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Box盒子组件</h1>
        <section class="markdown">
            <p>盒子组件是整个模板中使用最广泛的组件。你可以用它来显示图表到文本块。它有很多不同的风格，我们将在下面探讨。</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
    </section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Box-demo-Default">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
                        <div class="box">
                            <div class="box-header with-border">
                                <h3 class="box-title">Default Box Example</h3>
                                <div class="box-tools pull-right">
                                    <span class="label label-primary">Label</span>
                                </div>
                            </div>
                            <div class="box-body">
                                The body of the box
                            </div>
                            <div class="box-footer">
                                The footer of the box
                            </div>
                            <!-- box-footer -->
                        </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Box-demo-Default">默认样式</a></div>
                    <div>
                        <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
                        <code >&lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;box-header with-border&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Default Box Example&lt;/h3&gt;
        &lt;div class=&quot;box-tools pull-right&quot;&gt;
            &lt;span class=&quot;label label-primary&quot;&gt;Label&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box-body&quot;&gt;
        The body of the box
    &lt;/div&gt;
    &lt;div class=&quot;box-footer&quot;&gt;
        The footer of the box
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Box-demo-Variants">
                <section id="J_vue_iw3mdfv42u" class="code-box-demo">
                    <div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="box">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Default Box Example</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-primary">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Primary Box Example</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-info">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Info Box Example</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-4">
                                <div class="box box-warning">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Warning Box Example</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-success">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Success Box Example</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-danger">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Danger Box Example</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Box-demo-Variants">Box Variants</a></div>
                    <div>
                        <p>
                            You can change the style of the box by adding any of the contextual classes.
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
      &lt;div class=&quot;box&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Default Box Example&lt;/h3&gt;
          &lt;/div&gt;&lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
      &lt;div class=&quot;box box-primary&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Primary Box Example&lt;/h3&gt;
          &lt;/div&gt;&lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
      &lt;div class=&quot;box box-info&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Info Box Example&lt;/h3&gt;
          &lt;/div&gt;&lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
      &lt;div class=&quot;box box-warning&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Warning Box Example&lt;/h3&gt;
          &lt;/div&gt;&lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
      &lt;div class=&quot;box box-success&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Success Box Example&lt;/h3&gt;
          &lt;/div&gt;&lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
      &lt;div class=&quot;box box-danger&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Danger Box Example&lt;/h3&gt;
          &lt;/div&gt;&lt;!-- /.box-header --&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Box-demo-Solid">
                <section id="J_vue_z0xtotnq5o" class="code-box-demo">
                    <div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="box box-solid box-default">
                                    <div class="box-header">
                                        <h3 class="box-title">Default Solid Box</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-solid box-primary">
                                    <div class="box-header">
                                        <h3 class="box-title">Primary Solid Box</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-solid box-info">
                                    <div class="box-header">
                                        <h3 class="box-title">Info Solid Box</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-4">
                                <div class="box box-solid box-warning">
                                    <div class="box-header">
                                        <h3 class="box-title">Warning Solid Box</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-solid box-success">
                                    <div class="box-header">
                                        <h3 class="box-title">Success Solid Box</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="box box-solid box-danger">
                                    <div class="box-header">
                                        <h3 class="box-title">Danger Solid Box</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title">
                        <a href="#src-components-Box-demo-Solid">Solid Box</a>
                    </div>
                    <div>
                        <p>Solid Boxes are alternative ways to display boxes. They can be created by simply adding the box-solid class to the box component. You may also use contextual classes with you solid boxes.</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand" style="max-height: 448.2px">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid box-default&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title&quot;&gt;Default Solid Box&lt;/h3&gt;
            &lt;/div&gt;&lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
                The body of the box
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid box-primary&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title&quot;&gt;Primary Solid Box&lt;/h3&gt;
            &lt;/div&gt;&lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
                The body of the box
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid box-info&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title&quot;&gt;Info Solid Box&lt;/h3&gt;
            &lt;/div&gt;&lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
                The body of the box
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid box-warning&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title&quot;&gt;Warning Solid Box&lt;/h3&gt;
            &lt;/div&gt;&lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
                The body of the box
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid box-success&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title&quot;&gt;Success Solid Box&lt;/h3&gt;
            &lt;/div&gt;&lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
                The body of the box
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;
        &lt;div class=&quot;box box-solid box-danger&quot;&gt;
            &lt;div class=&quot;box-header&quot;&gt;
                &lt;h3 class=&quot;box-title&quot;&gt;Danger Solid Box&lt;/h3&gt;
            &lt;/div&gt;&lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
                The body of the box
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
        &lt;/div&gt;&lt;!-- /.box --&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Box-demo-Loading">
                <section id="J_vue_c6ii7duz7tf" class="code-box-demo">
                    <div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="box box-default">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Loading state</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                    <!-- Loading (remove the following to stop the loading)-->
                                    <div class="overlay">
                                        <i class="fa fa-refresh fa-spin"></i>
                                    </div>
                                    <!-- end loading -->
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-md-6">
                                <div class="box box-default box-solid">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Loading state (.box-solid)</h3>
                                    </div>
                                    <div class="box-body">
                                        The body of the box
                                    </div>
                                    <!-- Loading (remove the following to stop the loading)-->
                                    <div class="overlay">
                                        <i class="fa fa-refresh fa-spin"></i>
                                    </div>
                                    <!-- end loading -->
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Box-demo-Loading">loading状态</a></div>
                    <div>
                        <p>To simulate a loading state, simply place this code before the .box closing tag.
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper highlight-wrapper-expand" style="max-height: 448.2px">
                    <pre class="language-xml">
                      <code>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
      &lt;div class=&quot;box box-default&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Loading state&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
          &lt;!-- Loading (remove the following to stop the loading)--&gt;
          &lt;div class=&quot;overlay&quot;&gt;
              &lt;i class=&quot;fa fa-refresh fa-spin&quot;&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;!-- end loading --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;&lt;!-- /.col --&gt;

  &lt;div class=&quot;col-md-6&quot;&gt;
      &lt;div class=&quot;box box-default box-solid&quot;&gt;
          &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Loading state (.box-solid)&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;box-body&quot;&gt;
              The body of the box
          &lt;/div&gt;&lt;!-- /.box-body --&gt;
          &lt;!-- Loading (remove the following to stop the loading)--&gt;
          &lt;div class=&quot;overlay&quot;&gt;
              &lt;i class=&quot;fa fa-refresh fa-spin&quot;&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;!-- end loading --&gt;
      &lt;/div&gt;&lt;!-- /.box --&gt;
  &lt;/div&gt;&lt;!-- /.col --&gt;
&lt;/div&gt;</code>
                    </pre>
                </section>
            </section>
        </div>
    </div>
</article>